<template>
    <div>
        <header-view></header-view>
        <div class="login-wrap">
            <el-breadcrumb separator="/"
                           style="font-size: 24px;margin-left: 12px;margin-bottom: 10px; padding-top: 15px">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 康复记录
                </el-breadcrumb-item>
            </el-breadcrumb>
            <div class="container">
                <el-button type="primary" icon="el-icon-d-arrow-left" @click="handleReturn"
                           style="margin-bottom: 18px;">返回上一层
                </el-button>
                <div class="handle-box">
                    姓名：
                    <el-input v-model="query.patientName" placeholder="姓名" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 140px"></el-input>
                    &emsp;训练时间：
                    <el-date-picker style="width: 20%;"
                                    v-model="query.trainStartTime"
                                    type="date"
                                    clearable
                                    placeholder="训练开始时间"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="startTimeMethod()"
                                    @keyup.enter.native="handleSearch"></el-date-picker>
                    ~
                    <el-date-picker style="width: 20%;"
                                    v-model="query.trainEndTime"
                                    type="date"
                                    placeholder="训练结束时间"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="endTimeMethod()"
                                    @keyup.enter.native="handleSearch"></el-date-picker>&emsp;
                    得分：
                    <el-input v-model="query.minValue" placeholder="最小值" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 140px"></el-input>
                    ~
                    <el-input v-model="query.maxValue" placeholder="最大值" class="handle-input mr10"
                              @keyup.enter.native="handleSearch" style="width: 140px"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="margin-left: 20px">搜索
                    </el-button>
                    <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>
                    <el-button type="primary" icon="el-icon-aim" @click="trainRecord" style="margin-left: 60px">康复记录
                    </el-button>
                    <el-button type="primary" icon="el-icon-folder-opened" @click="assessRecode">评估记录</el-button>
                </div>

                <el-table
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @current-change="handleSelectionChange"
                >
                    <!--                <el-table-column type="selection" width="55" align="center"></el-table-column>-->
                    <el-table-column width="55" align="center">
                        <template slot-scope="scope">
                            <el-radio v-model="radio" :label="scope.row.trainId">
                                <span class="el-radio__label"></span>
                            </el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="trainId" label="康复训练ID" align="center"></el-table-column>
                    <el-table-column prop="patientName" label="姓名" align="center"></el-table-column>
                    <el-table-column v-if="false" prop="patientCardNo" label="身份证号" align="center"></el-table-column>
                    <el-table-column prop="gameNm" label="康复游戏名称" align="center"></el-table-column>
                    <el-table-column prop="trainStartTime" label="游戏开始时间" align="center"></el-table-column>
                    <el-table-column prop="trainEndTime" label="游戏结束时间" align="center"></el-table-column>
                    <el-table-column prop="trainGrade" label="得分" width="180" align="center"></el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <!--总和评估报告-->
        <el-dialog :visible.sync="visible" width="50%" :before-close="seeColse" :fullscreen=true>
            <el-button type="primary" @click="firstSee">打印预览</el-button>
            <el-button @click="seeColse" style="margin-bottom: 20px">关 闭</el-button>
            <el-tabs v-model="assesstableTabsValue" type="card">
                <el-tab-pane v-if="onePersonAssessData && onePersonAssessData.length >=0"
                             v-for="(item, index) in onePersonAssessData"
                             :key="item.assessId"
                             :label="item.assessTime"
                >
                    <div>
                        <!--基本信息-->
                        <el-row style="margin-top: 10px">
                            <el-col :span="24">
                                <div style="text-align: center;">
                                    <span style="font-size: 40px;color: black;font-weight: bold">评估报告</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="24">
                                <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                                    <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">基本信息</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="12">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white;margin-left: 40px;">&emsp;&emsp;姓名：{{item.patientName}}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white;">手机号：{{item.patientPhone}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="12">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white;margin-left: 40px;">出生日期：{{item.patientBirth}}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white">&emsp;年龄：{{item.patientAge}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <!--评估信息-->
                        <el-row style="margin-top: 10px">
                            <el-col :span="24">
                                <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                                    <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">评估信息</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="16">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white;margin-left: 40px;">开始时间：{{item.assessStartTime}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="16">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white;margin-left: 40px;">结束时间：{{item.assessEndTime}}</span>
                                </div>
                            </el-col>

                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="12">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white;margin-left: 40px;">&emsp;&emsp;时长：{{item.assessTime}}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top:15px;">
                                    <span style="font-size: 30px;color: white">&emsp;得分：{{item.assessGrade}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <!--评估关节数据-->
                        <el-row style="margin-top: 10px">
                            <el-col :span="24">
                                <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                                    <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">评估关节数据</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-col :span="36">
                                <div style="margin-top:8px;text-align: left;">
                                    <el-table style="margin-top: 20px;font-size: 20px;width: 750px"
                                              :data="item.assessData"
                                              border
                                              header-cell-class-name="table-header"
                                    >
                                        <el-table-column prop="jointName" label="评估关节训练名称"
                                                         align="center"></el-table-column>
                                        <el-table-column prop="explain" label="说明" align="center"></el-table-column>
                                        <el-table-column prop="normal" label="正常值" align="center"></el-table-column>
                                        <el-table-column label="评估结果" align="center">
                                            <template slot-scope="scope">
                                                左：{{scope.row.leftValue }}
                                                右：{{scope.row.rightValue}}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </el-dialog>
        <!--预览-->
        <el-dialog :visible.sync="printvisible" width="70%" :before-close="closeEdit" :fullscreen=true>

            <el-button type="primary" v-print="'#print'">打 印</el-button>
            <el-button @click="closeEdit">关 闭</el-button>
            <div id="print">
                <div style="text-align: right">
                    <span style="font-size: 15px;color: black;">希迪克（郑州）智能康复设备有限公司</span>
                </div>
                <!--基本信息-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="text-align: center;">
                            <span style="font-size: 40px;color: black;font-weight: bold">评估报告</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">基本信息</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">&emsp;&emsp;姓名：{{assessBasicMess.patientName}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;">手机号：{{assessBasicMess.patientPhone}}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">出生日期：{{assessBasicMess.patientBirth}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white">&emsp;年龄：{{assessBasicMess.patientAge}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!--评估信息-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">评估信息</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">开始评估时间：{{assessBasicMess.onePersonAssessStartTime}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white">评估次数：{{assessBasicMess.assessMaxGrade}}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">评估最长时长：{{assessBasicMess.assessMaxTime}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white">最高得分：{{assessBasicMess.assessMaxGrade}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!--评估关节数据-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">综合关节数据</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="36">
                        <div style="margin-top:8px;text-align: left;">
                            <!--肩关节屈-->
                            <div id="oneChart" style="width:750px;height: 260px"></div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
        <!--康复记录-->
        <el-dialog :visible.sync="trainvisible" width="60%" :before-close="closeTrain" :fullscreen=true>
            <el-button type="primary" v-print="'#trainprint'">打 印</el-button>
            <el-button @click="closeTrain">关 闭</el-button>
            <div id="trainprint">
                <!--基本信息-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="text-align: center;">
                            <span style="font-size: 40px;color: black;font-weight: bold">评估报告</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">基本信息</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">&emsp;&emsp;姓名：{{onePersonTrainData.patientName}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;">手机号：{{onePersonTrainData.patientPhone}}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">出生日期：{{onePersonTrainData.patientBirth}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white">&emsp;年龄：{{onePersonTrainData.patientAge}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!--康复信息-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">康复信息</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="18">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">开始训练时间：{{onePersonTrainData.trainStartTime}}</span>
                        </div>
                    </el-col>

                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;margin-left: 40px;">评估次数：{{onePersonTrainData.assessNumber}}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top:15px;">
                            <span style="font-size: 30px;color: white;">训练次数：{{onePersonTrainData.trainNumber}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!--康复记录-->
                <el-row style="margin-top: 10px">
                    <el-col :span="24">
                        <div style="margin-top:8px;display: block;background:#95bcc8;width:100%;text-align: left;height: 50px;border: #6690ae;border-radius: 5px 5px 5px 5px">
                            <span style="font-size: 30px;color: black;margin-left: 15px;font-weight: bold;">康复记录</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="36">
                        <div style="margin-top:8px;text-align: left;">
                            <el-table style="margin-top: 20px;font-size: 20px;width: 750px"
                                      :data="onePersonTrainData.resultData"
                                      border
                                      header-cell-class-name="table-header"
                            >
                                <el-table-column width="90px" label="序号" align="center">
                                    <template slot-scope="scope">
                                        {{scope.$index+1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="分类" align="center">
                                    <template slot-scope="scope">
                                          <span v-if="scope.row.assessId!==undefined">
                                           评估
                                         </span>
                                        <span v-if="scope.row.trainId!==undefined">
                                            康复训练
                                         </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="时间" align="center">
                                    <template slot-scope="scope">
                                          <span v-if="scope.row.assessId!==undefined">
                                           {{scope.row.assessEndTime}}
                                         </span>
                                        <span v-if="scope.row.trainId!==undefined">
                                           {{scope.row.trainEndTime}}
                                         </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="具体内容" align="center">
                                    <template slot-scope="scope">
                                          <span v-if="scope.row.assessId!==undefined">
                                           {{scope.row.assessTypeText}}
                                         </span>
                                        <span v-if="scope.row.trainId!==undefined">
                                           {{scope.row.gameNm}}
                                         </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    import {
        trainData,
        selectByPtCerNo,
        selectLeftAndRightData,
        selectTrainByPtCerNo
    } from '../../../api/hospital/train';

    export default {
        name: 'user',
        data() {
            return {
                query: {
                    patientName: '',
                    startTime: '',
                    endTime: '',
                    minValue: '',
                    maxValue: ''
                },
                assessBasicMess: {
                    patientName: '',
                    patientPhone: '',
                    patientBirth: '',
                    patientAge: '',
                    startTime: '',
                    endTime: '',
                    assessTime: '',
                    assessGrade: ''
                },
                tableData: [],
                multipleSelection: {},
                radio: '',
                pageTotal: 0,
                visible: false,
                onePersonAssessData: [],
                onePersonTrainData: {},
                assesstableTabsValue: '0',
                printvisible: false,
                trainvisible: false
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 获取后台数据
            getData() {
                trainData(this.query).then(res => {
                    if (res.success == true) {
                        this.tableData = res.data;
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            startTimeMethod() {
                let self = this;
                return {
                    disabledDate(time) {
                        if (self.query.trainEndTime) {
                            return new Date(self.query.trainEndTime).getTime() <= time.getTime();
                        } else {
                            return time.getTime() > Date.now() - 8.64e6;
                        }
                    }
                }
            },
            endTimeMethod() {
                let self = this;
                return {
                    disabledDate(time) {
                        if (self.query.trainStartTime) {
                            return new Date(self.query.trainStartTime).getTime() >= time.getTime() || time.getTime() > Date.now() - 8.64e6;
                        } else {
                            return time.getTime() > Date.now() - 8.64e6;
                        }
                    }
                }
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 触发重置按钮
            handleReset() {
                this.query.patientName = "";
                this.query.trainStartTime = "";
                this.query.trainEndTime = "";
                this.query.minValue = "";
                this.query.maxValue = "";
                this.getData();
            },
            // 单选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /*返回上一层 主页*/
            handleReturn() {
                this.$router.push('/manage');
            },
            // 康复记录
            trainRecord(index, row) {
                //根据身份证号查询患者的评估记录
                selectTrainByPtCerNo({ptCerNo: this.multipleSelection.ptCerNo}).then(res => {
                    if (res.success == true) {
                        this.trainvisible = true;
                        this.onePersonTrainData = res.data;
                    } else {
                        this.$message.error('查询失败');
                    }
                });
            },
            // 评估记录 查询患者的评估列表
            assessRecode(index, row) {
                // 未选择相关用户
                if (this.multipleSelection.patientCardNo == undefined) {
                    this.$message.warning('请选择相关患者查看评估记录');
                } else {
                    //根据身份证号查询患者的评估记录
                    selectByPtCerNo({ptCerNo: this.multipleSelection.ptCerNo}).then(res => {
                        if (res.success == true) {
                            this.visible = true;
                            this.onePersonAssessData = res.data;
                        } else {
                            this.$message.error('查询失败');
                        }
                    });

                }
            },
            /*关闭评估记录表*/
            seeColse() {
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.visible = false;
                        this.radio = ''
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });

            },
            //预览打印
            firstSee() {
                this.printvisible = true;
                //根据身份证号查询患者的左，右，训练，评估整体信息
                selectLeftAndRightData({ptCerNo: this.multipleSelection.ptCerNo}).then(res => {
                        if (res.success == true) {
                            this.printvisible = true;
                            //基本信息 +评估信息
                            this.assessBasicMess = res.data[0];
                            //开始评估时间 肩关节屈
                            //横坐标时间
                            let time = [];
                            //title
                            let jointName = res.data[0].jointName;
                            //左 评估
                            //右评估
                            //左训练
                            //右训练
                            if (res.data[0].resultData.length !== 0) {
                                for (let j = 0; j < res.data[0].resultData.length; j++) {
                                    let list = res.data[0].resultData;
                                    //评估
                                    if (list[j].assessId !== undefined) {
                                        time.push(list[j].assessEndTime);
                                    }
                                    //康复游戏
                                    if (list[j].trainId !== undefined) {
                                        time.push(list[j].trainEndTime);
                                    }
                                }
                            }
                            ;
                            this.oneOptions = {
                                color: ['rgb(8,252,7)', 'rgb(255,168,0)', 'rgb(255,38,139)', 'rgb(69,200,255)'],
                                title: {
                                    text: jointName
                                },
                                tooltip: { //提示框
                                    trigger: 'axis',
                                },
                                legend: {//图例的类型
                                    icon: 'roundRect',//图例icon图标
                                    data: [
                                        {
                                            name: "左-评估",
                                            textStyle: {
                                                color: '#fff'
                                            }

                                        }, {
                                            name: "右-评估",
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }, {
                                            name: "左-康复训练",
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }, {
                                            name: "右-康复训练",
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        },
                                    ],

                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    top: '17%',
                                    containLabel: true //grid区域是否包含坐标轴的刻度标签
                                },
                                xAxis: {
                                    type: 'category', //坐标轴类型。
                                    boundaryGap: false, //坐标轴两边留白策略
                                    data: time,
                                    axisLabel: {//坐标轴刻度标签的相关设置
                                        interval: 0,
                                        textStyle: {
                                            color: '#fff',
                                            fontSize: 10
                                        },
                                    },
                                    axisLine: {//坐标轴轴线相关设置
                                        show: true,
                                        lineStyle: {
                                            color: 'rgb(2,121,253)'
                                        }
                                    },
                                    axisTick: { //坐标轴刻度相关设置。
                                        show: false,
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLabel: { //x轴的坐标文字
                                        show: true,
                                        textStyle: {
                                            color: '#fff' //文字的颜色
                                        },

                                    },
                                    max: 180,//最大值100
                                    axisLine: {//坐标轴轴线相关设置
                                        show: true,
                                        lineStyle: {
                                            color: 'rgb(2,121,253)'
                                        }
                                    },
                                    axisTick: { //坐标轴刻度相关设置。
                                        show: false,
                                    },
                                    splitLine: {  //坐标在grid区域的分割线
                                        lineStyle: { //设置分割线的样式(图表横线颜色)
                                            color: ['#153a8a']
                                        }
                                    }
                                },
                                series: [
                                    {
                                        name: '左-评估',
                                        type: 'line',
                                        data: [10, 20, 30, 50],
                                        lineStyle: {
                                            color: 'rgb(8,252,7)'  //线的颜色
                                        }
                                    },
                                    {
                                        name: '右-评估',
                                        type: 'line',
                                        data: [20, 20, 60, 100],
                                        lineStyle: {
                                            color: 'rgb(255,168,0)' //线的颜色
                                        }
                                    },
                                    {
                                        name: '左-康复训练',
                                        type: 'line',
                                        data: [10, 28, 65, 120],
                                        lineStyle: {
                                            color: 'rgb(255,38,139)' //线的颜色
                                        }
                                    },
                                    {
                                        name: '右-康复训练',
                                        type: 'line',
                                        data: [19, 50, 60, 140],
                                        lineStyle: {
                                            color: 'rgb(69,200,255)' //线的颜色
                                        }
                                    }
                                ]
                            }
                            ;
                            setTimeout(() => {
                                let oneChart = this.$echarts.init(document.getElementById('oneChart'));
                                oneChart.setOption(this.oneOptions);
                            }, 500);
                        } else {
                            this.$message.error('查询失败');
                        }
                    }
                )
                ;
            },
            closeEdit() {//关闭编辑弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.printvisible = false;
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            }
            ,
            //关闭康复记录弹出框
            closeTrain() {
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.trainvisible = false;
                        this.radio = ''
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
            ,
        }
    }
    ;
</script>

<style scoped>
    /*card 的框框*/
    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: 3px solid #95bcc8;
    }

    /deep/ .el-tabs__item {
        padding: 0 20px;
        font-size: 22px;
        font-weight: 600;
        height: 42px;
    }

    /* > 箭头*/
    /deep/ .el-tabs__nav-next, .el-tabs__nav-prev {
        color: black;
        font-size: 30px;
    }

    /* > 箭头*/
    /deep/ .el-tabs__nav-prev, .el-tabs__nav-prev {
        color: black;
        font-size: 30px;
    }

    /*弹出框背景*/
    /deep/ .el-dialog {
        background: #829593;
    }

    /deep/ .el-dialog__header {
        padding-top: 14px;
    }

    .login-wrap {
        position: relative;
        width: 100%;
        height: 1000px;
        background-color: rgba(130, 149, 147, 0.59);
    }

    .header .logo {
        float: left;
        width: 400px;
        line-height: 50px;
        margin-top: 15px;
    }

    .btn-bell .el-icon-bell {
        color: #fff;
    }

    cascader {
        margin-left: 10px;
    }

    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .header-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    /* 表格的字体大小*/
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
